
<template>
  <!-- vue3 的 template 不在需要一个元素包裹 -->
  <!-- vue新增的内置组件 -->
  <!--  
    在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
    好处: 减少标签层级, 减小内存占用
    -->
  <!-- 
    vue2的内置组件
     <slot></slot>
   <keep-alive></keep-alive> 
    <component is=""></component>
    <template></template>
    <transition>
    
    </transition> -->
  <Fragment>
    <headcom></headcom>
    <div>你好</div>
    <div>撒旦法</div>
    <tel-com :flag="true"></tel-com>
    <button @click="$router.go(-1)">回到上一页</button>
    <button @click="goBack()">回到上一页</button>
  </Fragment>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import telCom from "./Tel.vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  components: { telCom },
  setup() {
    // vue3 接受参数
    let Route = useRoute();
    //接受query参数
    console.log(Route.query.username);
    let router = useRouter();
    let goBack = () => {
      router.go(-1);
    };
    return {
      goBack,
    };
  },
});
</script>